Skip to content

Add loading state to Create Project and Create Channel modals - #31

Open
AakashKB wants to merge 1 commit into
10xapp:mainfrom
AakashKB:fix/create-load-state
Open

Add loading state to Create Project and Create Channel modals#31
AakashKB wants to merge 1 commit into
10xapp:mainfrom
AakashKB:fix/create-load-state

Conversation

@AakashKB

@AakashKB AakashKB commented Apr 1, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Contributor

Summary

  • CreateProjectModal: wire existing createBoard.isPending from React Query to disable button and show "Creating..." during submission
  • MessagesView Create Channel: add isCreatingChannel state to disable button and show "Creating..." during the async addChannel API call

Both modals previously awaited async API calls with no loading indicator, allowing double-submission and leaving the UI unresponsive during network round-trips.

Test plan

  • Create a new project — button should show "Creating..." and be disabled until API responds
  • Create a new channel in Messages — same behavior
  • Verify double-clicking the create button does not create duplicates
  • Verify button re-enables if the API call fails

Closes #30

Summary by CodeRabbit

  • Bug Fixes
    • Prevented duplicate submissions during channel and project creation by disabling buttons and adding loading states.
    • Creation buttons now display "Creating..." feedback while operations complete.

@coderabbitai

coderabbitai Bot commented Apr 1, 2026 •
edited
Loading

Copy link
Copy Markdown

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 650ed915-2bba-43c3-8d9a-4f3671f3eb7c

📥 Commits

Reviewing files that changed from the base of the PR and between f50fda1 and 689108e.

📒 Files selected for processing (2)
  • core-web/src/components/Messages/MessagesView.tsx
  • core-web/src/components/Projects/components/CreateProjectModal.tsx
📝 Walkthrough

Walkthrough

Loading state handling has been added to channel and project creation flows. Both components now track pending operations, disable submission buttons during creation, and display dynamic feedback text to prevent duplicate submissions and provide visual progress indication.

Changes

Cohort / File(s) Summary
Channel Creation Loading State
core-web/src/components/Messages/MessagesView.tsx		 Added isCreatingChannel state to prevent duplicate submissions. Create button now disables when name is empty or creation is in progress, with text changing to "Creating..." during submission.
Project Creation Loading State
core-web/src/components/Projects/components/CreateProjectModal.tsx		 Create button now disables when name is empty or createBoard.isPending is true. Button label dynamically changes to "Creating..." during submission instead of static "Create" text.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A click prevention spell we weave,
No double-creates to deceive,
With "Creating..." shown so bright,
Loading states feel just right! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately and concisely describes the main changes: adding loading state to both Create Project and Create Channel modals, which directly reflects the code modifications.
Linked Issues check ✅ Passed The PR implements the core requirements from issue #30: disables buttons during creation and shows loading feedback via disabled state and text changes, preventing duplicate submissions and improving UX during async operations.
Out of Scope Changes check ✅ Passed All changes are directly related to the objective of adding loading state to the Create Project and Create Channel modals; no unrelated modifications are present.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@sonarqubecloud

sonarqubecloud Bot commented Apr 1, 2026

Copy link
Copy Markdown

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

@AakashKB AakashKB mentioned this pull request Apr 1, 2026
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Create Project modal has no loading feedback

1 participant

@AakashKB